<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
      <el-breadcrumb-item>公告列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输公告标题" clearable v-model="title" @clear="searchAdvice">
            <el-button slot="append" icon="el-icon-search" @click="searchAdvice"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showAddAdviceDialog">添加公告</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="success" @click="descByWeight">降序列表</el-button>
        </el-col>
      </el-row>
      <el-table :data="adviceList" border stripe @selection-change="selectionChange">
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column label="编号" prop="id" width="70px"></el-table-column>
        <el-table-column label="公告标题" prop="title"></el-table-column>
        <el-table-column label="内容ID" prop="body.id" width="80px"></el-table-column>
        <el-table-column label="发布时间" prop="publishTime" width="180px"></el-table-column>

        <el-table-column prop="weight" label="是否置顶" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.weight=='1'" style='color: red'>置顶</span>
            <span v-if="scope.row.weight=='0'" style='color: limegreen'>正常</span>
          </template>
        </el-table-column>

        <el-table-column prop="isCancel" label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.isCancel=='1'" style="color: red">已撤销</span>
            <span v-if="scope.row.isCancel=='0'" style="color: limegreen">正常</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="removeAdviceById(scope.row.id)">删除</el-button>

            <el-button type="warning" size="mini" v-if="scope.row.isCancel == 0" @click="changeCancelById(scope.row.id,1)">撤销</el-button>
            <el-button type="warning" size="mini" v-if="scope.row.isCancel == 1" @click="changeCancelById(scope.row.id,0)">恢复</el-button>

            <el-button type="success" size="mini" v-if="scope.row.weight == 0" @click="changeWeightById(scope.row.id,1)" >置顶</el-button>
            <el-button type="warning" size="mini" v-if="scope.row.weight == 1" @click="changeWeightById(scope.row.id,0)" >取消置顶</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3,6,12,24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>

    <div>
      <!--修改菜单-->
      <el-dialog title="修改公告" :visible.sync="editAdviceFormVisible" :close-on-click-modal="false">
        <el-form ref="editAdviceForm" :rules="editAdviceRules" :model="editAdvice" label-width="150px" size="mini">
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="editAdvice.title"></el-input>
          </el-form-item>
        </el-form>
       <div>
         <Toolbar
             style="border-bottom: 1px solid #ccc"
             :editor="editor"
             :defaultConfig="toolbarConfig"
             :mode="mode"
         />
         <Editor
             style="height: 500px; overflow-y: hidden;text-align: left"
             v-model="html"
             :defaultConfig="editorConfig"
             :mode="mode"
             @onCreated="onCreated"
         />
       </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEditAdvice">取 消</el-button>
          <el-button type="primary" @click="saveEditAdvice">确 定</el-button>
        </div>
      </el-dialog>


      <!--添加菜单-->
      <el-dialog title="添加公告" :visible.sync="addAdviceFormVisible" :close-on-click-modal="false">
        <el-form ref="addAdviceForm" :rules="addAdviceRules" :model="addAdvice" label-width="150px" size="mini">

          <el-form-item label="公告标题" prop="title">
            <el-input v-model="addAdvice.title"></el-input>
          </el-form-item>
          <el-form-item label="权重" prop="weight">
            <el-radio v-model="addAdvice.weight" checked :label="1">置顶</el-radio>
            <el-radio v-model="addAdvice.weight" :label="0">正常</el-radio>
          </el-form-item>

          <el-form-item label="撤销状态" prop="isCancel">
            <el-radio v-model="addAdvice.isCancel" checked :label="0">正常</el-radio>
            <el-radio v-model="addAdvice.isCancel" :label="1">撤销</el-radio>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAddAdvice">取 消</el-button>
          <el-button type="primary" @click="saveAddAdvice">发 布</el-button>
        </div>
        <advice-editor ref="adviceBody"></advice-editor>
      </el-dialog>

    </div>

  </div>
</template>
<script>
import AdviceEditor from "@/components/AdviceEditor";
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  components:{AdviceEditor,Vue, Editor, Toolbar},
  data() {
    return {
      //富文本相关
      editor: null,
      html: '',
      toolbarConfig: { },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple'
      bodyList:[],
      adviceIds: [],
      addAdviceFormVisible: false,
      editAdviceFormVisible: false,
      pageNum: 1,
      pageSize: 3,
      adviceList: [],
      total: 0,
      title: "", //标题名称
      addAdvice: {
        title: '',
        body:{
          id:'',
          contenthtml:''
        },
        weight:0,
        isDelete:0,
        isCancel:0
      },
      editAdvice: {
        title: '',
        body:{
          id:'',
          contenthtml:''
        },
        weight:'',
        isDelete:0,
        isCancel:''
      },
      setEditorHtml:'',
      editAdviceRules: {
        title: [
          {required: true, message: "标题不能为空", trigger: "blur"}
        ],
        weight: [
          {required: true, message: "请选择权重", trigger: "change"}
        ],
        isCancel: [
          {required: true, message: "请选择状态", trigger: "change"}
        ]
      },
      parentMenus: [],
      addAdviceRules: {
        title: [
          {required: true, message: "标题不能为空", trigger: "blur"}
        ],
        weight: [
          {required: true, message: "请选择权重", trigger: "change"}
        ],
        isCancel: [
          {required: true, message: "请选择状态", trigger: "change"}
        ]
      }
    };
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    showAddAdviceDialog() {
      this.addAdviceFormVisible = true;
    },
    cancelAddAdvice() {
      this.addAdviceFormVisible = false;
      this.$refs.addAdviceForm.resetFields();
    },

    saveAddAdvice() {
      this.$refs.addAdviceForm.validate(valid => {
        if (!valid) {
          return;
        }
        this.addAdvice.body.contenthtml = this.$refs.adviceBody.getEditorHtml();
        console.log(this.addAdvice);
        let url = "advice/addAdvice";
        this.$axios.post(url, this.addAdvice)
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success("添加成功");
                this.addAdviceFormVisible = false;
                this.reloadData();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      })

    },

    showEditDialog(row) {
      this.html = row.body.contenthtml
      this.editAdviceFormVisible = true;
      this.editAdvice = JSON.parse(JSON.stringify(row))
    },

    cancelEditAdvice() {
      this.editAdviceFormVisible = false;
      this.$refs.editAdviceForm.resetFields();
    },

    saveEditAdvice() {
      console.log(this.editAdvice);
      this.editAdvice.body.contenthtml = this.html;
      console.log(this.editAdvice)
      let url = "advice/modifyAdvice";
      this.$axios.put(url, this.editAdvice)
          .then(res => {
            if (res.data.code == 200) {
              this.$message.success("修改成功");
              this.editAdviceFormVisible = false;
              this.reloadData();
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          })
    },

    handleSizeChange(size) {
      this.pageSize = size;
      this.reloadData();
    },

    handleCurrentChange(now) {
      this.pageNum = now;
      this.reloadData();
    },

    searchAdvice() {
      this.pageNum = 1;
      this.reloadData();
    },


    removeAdviceById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "advice/deleteAdvice/" + id;
        this.$axios.delete(url).then(res => {
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: res.data.msg,
                  duration: 1000
                })
                this.reloadData();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    changeCancelById(id,status){
        let url = "advice/cancelAdvice";
        this.$axios.get(url,{
          params:{
            id:id,
            status:status
        }
      }).then(res => {
          if (res.data.code == 200) {
            this.reloadData();
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
              duration: 1000
            })
          }
        })
    },

    changeWeightById(id,status){
      let url = "advice/topAdvice";
      this.$axios.get(url,{
        params:{
          id:id,
          status:status
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.reloadData();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    },

    //------批量删除员工----------------------------------
    selectionChange(obj) {
      this.adviceIds = [];
      for (let o of obj) {
        this.adviceIds.push(o.id);
      }
    },

    reloadData() {
      let url = "advice/showAdviceByPage";
      this.$axios.get(url, {
        params: {
          title: this.title,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.adviceList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },


    descByWeight() {
      let url = "advice/showAdviceByWeight";
      this.$axios.get(url, {
        params: {
          title: this.title,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.adviceList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },

    //------内容查询----------------------------------
    initBody(){
      let url = "advice/bodyList";
      this.$axios.get(url).then(res=>{
        if(res.data.code == 200){
          this.bodyList = res.data.data;
        }
      })
    },

    // reloadParentMenu() {
    //   let url = "Advice/parentPer";
    //   this.$axios.get(url).then(res => {
    //     console.log(res)
    //     if (res.data.code == 200) {
    //       this.parentMenus = res.data.data;
    //       console.log(res.data.data)
    //     } else {
    //       this.$message({
    //         type: "error",
    //         message: res.data.msg,
    //         duration: 1000
    //       })
    //     }
    //   });
    // }
  },
  created() {
    this.reloadData();
    this.initBody();
    // this.reloadParentMenu();
  }
};
</script>
<style lang="less" scoped>
</style>